<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/register.css">
</head>
<body>
    <div class="reg-box">
        <!-- 上面的标题 -->
        <h1 class="reg-title">欢迎注册</h1>
        <!-- 下面的内容 -->
        <div class="reg-content">
            <!-- 所有的输入框 --> 
            <div class="reg-input">
                <div class="regipt1">
                    <input name="name" type="text" placeholder="用户名">
                </div>
                
                <div class="regipt2">                    
                    <input name="pwd1" type="password" placeholder="密码">
                    <!-- 提示信息 -->
                    <span name="pwd1span"></span>
                </div>
                <div class="regipt3">
    
                    <input name="pwd2" type="password" placeholder="确认密码">
                    <!-- 提示信息 -->
                    <span name="pwd2span"></span>
                </div>
                <div class="regipt4">
                    <input name="vcname" type="text" placeholder="验证码"><a id="sc"></a> <span name="reset">看不清楚换一个</span>
                    <!-- 验证码 -->
                    <!-- <input name="vc" type="text" id="ac" placeholder="验证码"> <a id="sc"></a> <span name="reset">看不清楚换一个</span> <br> -->
                    <span name="vcspan" class="spanspan"></span>
                </div>
                <!-- 注册 -->
                <div class="reg-btn">
                    <button>注册</button>
                </div>

                <div name="msg"></div>
            </div>
        </div>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>

    <script>
        // 实现验证码
        $('#sc').html( setVC() ).click(function(){ $(this).html( setVC() ) });
        $('[name="reset"]').click( function(){ $('#sc').html( setVC() ) } );

        // 给button按钮添加点击事件
        $('button').click(function(){
            // 获取数据
            let name = $('[name="name"]').val();
            let pwd1 = $('[name="pwd1"]').val();
            let pwd2 = $('[name="pwd2"]').val();
            let vc1 = $('[name="vcname"]').val();
            let vc2 = $('#sc').html();

            // console.log(name,pwd1,pwd2,vc1,vc2);

            // 验证判断
            if(pwd1 !== pwd2){
                $('[name="pwd2span"]').html('您输入的两个密码不相同');
                return;
            }else{
                // 清除提示信息
                $('[name="pwd2span"]').html('');
            }

            // 不区分大小写
            // 先统一大小写
            if(vc1.toLowerCase() !== vc2.toLowerCase() ){
                $('[name="vcspan"]').html('您输入的验证码有误');
                // 重新刷新验证码
                $('#sc').html( setVC() );
                return;
            }else{
                // 清除错误提示
                $('[name="vcspan"]').html('');
            }
            // 刷新验证码
            $('#sc').html(setVC());

            // 发送ajax请求
            const xhr = myPromiseJQueryAjax( '../server/goods_reg.php' , 'post' , { userName:name , userPwd:pwd1 } , 'json' );
            xhr.then(function(res){
                console.log(res);
                if( res.result === 0 ){
            window.alert('您的注册失败,账号重复了')
          }else if( res.result === 1 ){
            // 注册成功 5秒后跳转 登录页面
            let time = 5;
            $('[name="msg"]').html(`恭喜您注册成功,${time}秒后跳转登录页面`);

            setInterval( function(){
              time--;

              if(time === 0){
                window.location.href = './login.html';
                return;
              }

              $('[name="msg"]').html(`恭喜您注册成功,${time}秒后跳转登录页面`);
            } , 1000 )

          }
            })
        })
    </script>
</body>
</html>